<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="The Page Description">
		<style type="text/css">@-ms-viewport{width: device-width;}</style>
		<title>Beetle - Resume</title>
		<link rel="stylesheet" href="css/layers.min.css" media="screen">
		<link rel="stylesheet" href="css/font-awesome.min.css" media="screen"> 
		<link rel="stylesheet" href="style.css" media="screen">
		<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<link rel="icon" href="favicon.ico">
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="152x152" href="img/apple-touch-icon-152x152.png">			
	</head>

	<body class="page">

		<header role="banner" class="transparent light">
			<div class="row">
				<div class="nav-inner row-content buffer-left buffer-right even clear-after">
					<div id="brand">
						<h1 class="reset"><!--<img src="img/logo.png" alt="logo">--><a href="home-01.html">Beetle</a></h1>
					</div><!-- brand -->
					<a id="menu-toggle" href="#"><i class="fa fa-bars fa-lg"></i></a>
					<nav>
						<ul class="reset" role="navigation">
							<li class="menu-item">
								<a href="home-01.html">Home</a>
								<ul class="sub-menu">
									<li><a href="home-01.html">Generic Home Page</a></li>
									<li><a href="home-02.html">App Showcase</a></li>
									<li><a href="home-03.html">App Showcase Alternative</a></li>
								</ul>
							</li>
							<li class="menu-item">
								<a href="works-4-columns.html">Works</a>
								<ul class="sub-menu">
									<li><a href="works-4-columns.html">Four Columns Grid Style</a></li>
									<li><a href="works-3-columns.html">Three Columns Grid Style</a></li>
									<li><a href="works-4-columns-alternative.html">Four Columns Mosaic Style</a></li>
									<li><a href="works-3-columns-alternative.html">Three Columns Mosaic Style</a></li>
									<li><a href="works-4-columns-lightbox.html">Lightbox Gallery</a></li>
									<li><a href="single-work-post.html">Single Work Page</a></li>
								</ul>
							</li>
							<li class="menu-item">
								<a href="blog-4-columns-masonry.html">Blog</a>
								<ul class="sub-menu">
									<li><a href="blog-4-columns-masonry.html">Four Columns Grid</a></li>
									<li><a href="blog-list-sidebar.html">List Style with Sidebar</a></li>
									<li><a href="single-blog-post.html">Single Post</a></li>
									<li><a href="single-blog-post-sidebar.html">Single Post with Sidebar</a></li>
								</ul>
							</li>
							<li class="menu-item"><a href="resume.html">Resume</a></li>
							<li class="menu-item">
								<a href="#">Features</a>
								<ul class="sub-menu">
									<li><a href="search.html">Search Page</a></li>
									<li><a href="no-results.html">Search Page - No Results</a></li>
									<li><a href="page-not-found.html">404 - Page Not Found</a></li>
									<li>
										<a href="#">Sub Menu</a>
										<ul class="sub-menu">
											<li><a href="#">Sub Sub Menu 01</a></li>
											<li><a href="#">Sub Sub Menu 02</a></li>
											<li><a href="#">Sub Sub Menu 03</a></li>
										</ul>										
									</li>
								</ul>								
							</li>
							<li class="menu-item"><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</div><!-- row-content -->	
			</div><!-- row -->	
		</header>

		<main role="main">
			<div id="intro-wrap">
				<div id="intro" class="preload darken more-button">					
					<div class="intro-item" style="background-image: url(http://placehold.it/1800x600/ddd/fff&text=Beetle%20image);">
						<div class="caption">
							<h2>Designer &amp; Maker</h2>
							<p>Building new products at Spotify NYC.</p>
						</div><!-- caption -->
						<div class="photocaption">
							<h4>Shot by <a href="http://danielezedda.com/">Daniele Zedda</a></h4>
						</div><!-- photocaption -->												
					</div>								
				</div><!-- intro -->
			</div><!-- intro-wrap -->

			<div id="main">

				<section class="row section">
					<div class="row-content buffer even clear-after">
						<div class="custom-carousel" data-autoplay="5000" data-pagination="true" data-transition="fade" data-autoheight="false">
							<div class="carousel-item">
								<div class="column four">
									<img src="http://placehold.it/800x300/ddd/fff&text=Beetle%20image" alt="">
								</div>
								<div class="column eight last">
									<h3>I create simple interfaces for humans and enjoy pixel-perfection.</h3>
									<p>I’m an experienced and passionate user interface designer with interaction design background.</p>
								</div>
							</div><!-- carousel-item -->
							<div class="carousel-item">
								<div class="column four">
									<img src="http://placehold.it/800x300/ddd/fff&text=Beetle%20image" alt="">
								</div>
								<div class="column eight last">
									<h3>I am a top experience designer.</h3>
									<p>I’m an experienced and passionate user interface designer with interaction design background.</p>
								</div>
							</div><!-- carousel-item -->
							<div class="carousel-item">
								<div class="column four">
									<img src="http://placehold.it/800x300/ddd/fff&text=Beetle%20image" alt="">
								</div>
								<div class="column eight last">
									<h3>I am a Themeforest Elite Author.</h3>
									<p>I’m an experienced and passionate user interface designer with interaction design background.</p>
								</div>
							</div><!-- carousel-item -->
						</div>			
					</div>
				</section>	

				<section class="row section">
					<div class="row-content buffer even clear-after">
						<div class="section-title"><h3>Latest Works</h3></div>
							<div class="grid-items portfolio-section preload">
								<article class="item column three" data-groups='["fun", "icons"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-picture"></i></div>
											<h2>The House</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>		
								<article class="item column six" data-groups='["lightbox", "minimal"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-video"></i></div>
											<h2>Telephone Love</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>											
								<article class="item column three" data-groups='["fun", "icons"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-picture"></i></div>
											<h2>Weapon</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>
								<article class="item column three" data-groups='["web-design", "minimal"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-news"></i></div>
											<h2>Robot Calendar 2013</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>	
								<article class="item column three" data-groups='["advertising", "lightbox", "web-design"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-video"></i></div>
											<h2>All of the Lights</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>											
								<article class="item column three" data-groups='["infographics", "web-design"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-picture"></i></div>
											<h2>To resolve 2013</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>	
								<article class="item column three" data-groups='["advertising", "infographics"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-camera"></i></div>
											<h2>The Essentials</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>													
								<article class="item column three" data-groups='["fun", "icons"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-news"></i></div>
											<h2>Music</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>	
								<article class="item column three" data-groups='["advertising", "fun"]'>
									<figure><img src="http://placehold.it/800x600/ddd/fff&text=Beetle%20image" alt=""></figure>
									<a class="overlay" href="#">
										<div class="overlay-content">
											<div class="post-type"><i class="icon icon-speaker-on"></i></div>
											<h2>Moka</h2>
											<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div><!-- overlay-content -->
									</a><!-- overlay -->
								</article>	
								<div class="shuffle-sizer three"></div>
							</div><!-- grid-items -->
						<div class="more-btn"><a class="button transparent aqua" href="#">Browse Portfolio</a></div>
					</div>	
				</section>

				<section class="row section text-light" style="background-color: #96C962;">
					<div class="row-content buffer even clear-after">
						<div class="section-title"><h3>Skills</h3></div>
						<p class="centertxt">I’m an experienced and passionate user interface designer with interaction design background.<br>My goal is to make the world wide web a better place by designing beautiful user experiences, one site at a time.</p>
						<div class="chart" data-percent="73" data-bar-color="#7ab746" data-animate="2000">
							<div class="chart-content">
								<div class="percent"></div>
								<div class="chart-title">User Interface</div>
							</div><!-- chart-content -->
						</div><!-- chart -->
						<div class="chart" data-percent="85" data-bar-color="#7ab746" data-animate="2500">
							<div class="chart-content">
								<div class="percent"></div>
								<div class="chart-title">Front-end</div>
							</div><!-- chart-content -->
						</div><!-- chart -->
						<div class="chart" data-percent="70" data-bar-color="#7ab746" data-animate="3000">
							<div class="chart-content">
								<div class="percent"></div>
								<div class="chart-title">User Experience</div>
							</div><!-- chart-content -->
						</div><!-- chart -->
					</div>	
				</section>								

				<section class="row section">
					<div class="row-content buffer even clear-after">
						<div class="timeline-label column six">
							<h4>Work experience</h4>
							<p>Specialties : User experience design, user interface design, brand identity, typography, print and packaging design, web standards, grid based layout.</p>
							<a class="button transparent aqua">View on Linkedin</a>
						</div><!-- timeline-label -->		
						<div class="timeline column six last">
							<div class="year">
								<time datetime="2013">2013</time>
								<div class="experience">
									<span class="circle"></span>
									<div class="experience-img"><img src="http://placehold.it/120x120/ddd/fff&text=Beetle%20image" alt=""></div>
									<div class="experience-info clear-after">
										<h5>Facebook</h5>
										<div class="role">UI/UX Designer</div>
										<p>October 2013 – November 2013 (2 months)Menlo Park, CA, United States of America</p>
									</div><!-- experience-info -->
								</div><!-- experience -->
								<div class="experience">
									<span class="circle"></span>
									<div class="experience-img"><img src="http://placehold.it/120x120/ddd/fff&text=Beetle%20image" alt=""></div>
									<div class="experience-info clear-after">
										<h5>Amazon</h5>
										<div class="role">UI/UX Designer</div>
										<p>October 2013 – November 2013 (2 months)Menlo Park, CA, United States of America</p>
									</div><!-- experience-info -->
								</div><!-- experience -->								
							</div><!-- year -->
							<div class="year">
								<time datetime="2012">2012</time>
								<div class="experience">
									<span class="circle"></span>
									<div class="experience-img"><img src="http://placehold.it/120x120/ddd/fff&text=Beetle%20image" alt=""></div>
									<div class="experience-info clear-after">
										<h5>Apple</h5>
										<div class="role">UI/UX Designer</div>
										<p>October 2013 – November 2013 (2 months)Menlo Park, CA, United States of America</p>
									</div><!-- experience-info -->
								</div><!-- experience -->
								<div class="experience">
									<span class="circle"></span>
									<div class="experience-img"><img src="http://placehold.it/120x120/ddd/fff&text=Beetle%20image" alt=""></div>
									<div class="experience-info clear-after">
										<h5>IBM</h5>
										<div class="role">UI/UX Designer</div>
										<p>October 2013 – November 2013 (2 months)Menlo Park, CA, United States of America</p>
									</div><!-- experience-info -->
								</div><!-- experience -->								
							</div><!-- year -->							
						</div><!-- timeline -->
					</div>	
				</section>

				<section class="row section">
					<div class="row-content buffer even clear-after">
						<div class="section-title"><h3>Frankie's Dribbble Shots</h3></div>
						<div class="dribbble-items portfolio-section preload" data-username="frankiefreesbie" data-elements="8">
						</div><!-- dribbble-items -->
						<div class="more-btn"><a class="button transparent pink" href="#JustinMezzell">View all Shots</a></div>						
					</div>	
				</section>								

				<section class="row section text-light" style="background-color:#FF605F;">
					<div class="row-content buffer even clear-after">
						<div class="testimonial-slider centertxt" data-autoplay="5000" data-pagination="true" data-transition="fade" data-autoheight="false">
							<div class="quote">
								<div class="column twelve last">
									<p>"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."</p>
									<div class="author">John Lennon</div>
								</div><!-- column -->
							</div><!-- quote -->
							<div class="quote">
								<div class="column twelve last">								
									<p>"Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy."</p>
									<div class="author">Fabrizio De Andr&egrave;</div>
								</div><!-- column -->
							</div><!-- quote -->		
							<div class="quote">
								<div class="column twelve last">									
									<p>"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour."</p>
									<div class="author">B.B. King</div>
								</div><!-- column -->									
							</div><!-- quote -->							
						</div><!-- testimonial-slider -->				
					</div>
				</section>	

				<section class="row section">
					<div class="row-content buffer even clear-after">
					<div class="section-title"><h3>Contact</h3></div>	
						<div class="column nine">
							<form class="contact-section">
								<span class="pre-input"><i class="icon icon-user"></i></span>
								<input class="name plain buffer" type="text" placeholder="Full name">
								<span class="pre-input"><i class="icon icon-email"></i></span>
								<input class="email plain buffer" type="email" placeholder="Email address">
								<textarea class="plain buffer" placeholder="Don't forget that kindness is all!"></textarea>
								<input class="plain button red" type="submit" value="Send">
							</form>	
						</div>	
						<div class="column three last">
							<div class="widget">
								<h4>Location</h4>
								<p>
									13, 2 Elizabeth ST,<br>
									Melbourne, Victoria 3000,<br>
									Australia
								</p>
							</div>
							<div class="widget">
								<h4>I am Social</h4>
								<ul class="inline meta-social">
									<li><a href="#" class="twitter-share border-box"><i class="fa fa-twitter fa-lg"></i></a></li>
									<li><a href="#" class="facebook-share border-box"><i class="fa fa-facebook fa-lg"></i></a></li>
									<li><a href="#" class="pinterest-share border-box"><i class="fa fa-pinterest fa-lg"></i></a></li>
								</ul>
							</div>								
						</div>
					</div>	
				</section>					

				<section class="row section">
					<div class="map" id="map_1" data-maplat="51.511214" data-maplon="-0.119824" data-mapzoom="5" data-color="aqua" data-height="22.222" data-img="img/marker.png" data-info="Based in London, UK"></div>
				</section>		

			</div><!-- id-main -->
		</main><!-- main -->

		<footer role="contentinfo">
			<div class="row">
				<div class="row-content buffer clear-after">
					<section id="top-footer">
						<div class="widget column three"><!-- la class="widget" è forse generata utomaticamente da wp -->
							<h4>Menu</h4>
							<ul class="plain">
								<li><a href="home-01.html">Home</a></li>
								<li><a href="works-3-columns.html">Portfolio</a></li>
								<li><a href="blog-4-columns-masonry.html">Blog</a></li>
								<li><a href="resume.html">Resume</a></li>
								<li><a href="file:///Users/pasqualevitiello/My%20Folder/Job/Envato/PR%20Themeforest/Flattie/Markup/Beetle/contact.html">Contact</a></li>
							</ul>
						</div>
						<div class="widget column three">
							<h4>Archives</h4>
							<ul class="plain">
								<li><a href="#">March 2014</a></li>
								<li><a href="#">April 2014</a></li>
								<li><a href="#">May 2014</a></li>
								<li><a href="#">June 2014</a></li>
								<li><a href="#">July 2014</a></li>
							</ul>
						</div>								
						<div class="widget column three">
							<h4>Widget</h4>
							<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
						</div>				
						<div class="widget meta-social column three">
							<h4>Follow Us</h4>
							<ul class="inline">
								<li><a href="#" class="twitter-share border-box"><i class="fa fa-twitter fa-lg"></i></a></li>
								<li><a href="#" class="facebook-share border-box"><i class="fa fa-facebook fa-lg"></i></a></li>
								<li><a href="#" class="pinterest-share border-box"><i class="fa fa-pinterest fa-lg"></i></a></li>
							</ul>
						</div>														
					</section><!-- top-footer -->
					<section id="bottom-footer">
						<p class="keep-left">&copy; 2014 Mokaine. All Rights Reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
						<p class="keep-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
					</section><!-- bottom-footer -->			
				</div><!-- row-content -->	
			</div><!-- row -->	
		</footer>

		<script src="https://code.jquery.com/jquery.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>		
		<script src="js/plugins.js"></script>
		<script src="js/beetle.js"></script>

	</body>

</html>
